<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Students</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div id = "selectResult">
    <form  action="/students_findName" method="post" class="form-horizontal" id="searchForm">
        <input type="text" class="form-control" placeholder="搜索..." name="student_name">
        <input type="submit" class="btn btn-info" placeholder="搜索">
        <a href="/students" class="btn btn-info" role="button">返回</a>
    </form>
    <table class="table table-dark table-hover">
        <thead>
        <tr>
            <th>学生ID</th>
            <th>学生学号</th>
            <th>学生姓名</th>
            <th>学生班级</th>
            <th>学生电话</th>
            <th>学生QQ</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="student : ${studentList}">
            <td th:text="${student.id}"></td>
            <td th:text="${student.student_id}"></td>
            <td th:text="${student.student_name}"></td>
            <td th:text="${student.student_clazz}"></td>
            <td th:text="${student.student_phone}"></td>
            <td th:text="${student.student_QQ}"></td>
            <td>
                <a th:href = "@{/student+{id}(id=${student.id})}">修改</a>
                <a th:href = "@{/deleteStudent+{id}(id=${student.id})}" id = "delete">删除</a>
                <a th:href="@{/sign+{id}(id=${student.id})}" target="_blank">签到</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<script >
    //字符串判空方法
    function isBlank(str){
        if(str == "" || str == null || str == undefined){
            return true;
        }else {
            return false;
        }
    }
    //添加用户js响应事件
    $("#add").click(function(){
        var student_id = document.forms["addStudent"]["student_id"].value;
        var student_name = document.forms["addStudent"]["student_name"].value;
        var student_clazz = document.forms["addStudent"]["student_clazz"].value;
        var student_phone = document.forms["addStudent"]["student_phone"].value;
        var student_QQ = document.forms["addStudent"]["student_QQ"].value;
        //判断是否有未填项
        if(isBlank(student_id) || isBlank(student_name) || isBlank(student_clazz) || isBlank(student_phone) || isBlank(student_QQ)){
            window.confirm("请完善信息");
        }else {
            var param = {
                "student_id": student_id,
                "student_name":student_name,
                "student_clazz": student_clazz,
                "student_phone": student_phone,
                "student_QQ": student_QQ
            };
            $.ajax({
                url:"/addStudent", //请求url
                data: param,    //请求参数
                async: true,    //是否异步
                success: function f(result) {
                    window.confirm(result.msg); //新增用户成功提示框
                    location.href = "students";    //重新加载界面，同步数据库信息
                }
            });

        }

    });
</script>
</body>
</html>